<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/public/public.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
</head>

<body>
    <h1><img src="img/material/logo.png" alt=""></h1>
    <main>
        <div class="zhuce_con">
            <form id="pubForm">
                <p>
                    <label for="name" class="lab">姓名 </label>
                    <input type="text" placeholder="请输入姓名" id="name" name="namer">
                </p>
                <p>
                    <label for="number" class="lab">手机号 </label>
                    <input type="number" placeholder="请输入手机号" id="number" name="phoneNumber">
                </p>
                <p>
                    <label for="mail" class="lab">邮箱 </label>

                    <input type="email" placeholder="请输入邮箱" id="mail" name="mail">
                </p>
                <p class="pass_eye">
                    <label for="password" class="lab">密码 </label>
                    <span class="fa fa-eye"></span>
                    <input type="password" placeholder="请输入密码" id="password" name="pass">
                </p>
                <p class="pass_eye2">
                    <label for="qr_password" class="lab">确认密码 </label>
                    <span class="fa fa-eye"></span>
                    <input type="password" placeholder="再次输入密码" id="qr_password" name="qr_pass">
                </p>
                <p class="yanzheng">
                    <label for="yanzheng" class="lab">验证码 </label>
                    <input type="text" value="" placeholder="请输入验证码" class="input_val" />
                    <canvas id="canvas" width="100" height="43"></canvas>
                    <p class="under_line"><a href="###">换一张</a></p>
                </p>

                <p class="phone_yanzheng">
                    <label for="phone_yz" class="lab">手机验证码 </label>
                    <input type="number" placeholder="请输入手机验证码" id="phone_yz" name="shouji_yanzheng">
                    <button id="code-btn">获取验证码</button>
                </p>
                <p class="agree">
                    <input type="checkbox" name="check" id="agree_inp">
                    <span>我已阅读并接受《量子矩阵服务协议》</span>
                </p>
                <input type="submit" class="btn" value="立即注册">
                <!-- <button class="btn">立即注册</button> -->
                <input type="reset" value="重置" class="chongzhi">

            </form>
        </div>
    </main>
    <footer>
        <p>量子矩阵公司 版权所有 Copyright © 2018-2019 QUTO Corporation, All Rights Reserved</p>
    </footer>
</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/ipUrl.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script src="js/hideShowPassword-master/hideShowPassword.js"></script>
<script>
    // 获取手机验证码
    var shouji_yanzheng = ""; //接收验证码   
    $('#code-btn').click(function () {
        $("#code-btn").css({
            background: '#e9f3e9',
            border: '1px solid #498E3D',
            color: '#498E3D',
            width: '16%'
        });
        var count = 60;
        //开始计时  
        $("#code-btn").attr('disabled', 'disabled');
        $("#code-btn").html("倒计时" + count + "秒");
        var timer = setInterval(function () {
            count--;
            $("#code-btn").html("倒计时" + count + "秒");
            if (count == 0) {
                clearInterval(timer);
                $("#code-btn").attr("disabled", false);//启用按钮  
                $("#code-btn").html("重新发送验证").css({
                    background: '#498E3D',
                    color: '#fff',
                });
                code = "";//清除验证码。如果不清除，过时间后，输入收到的验证码依然有效 
            }
        }, 1000);

        //向后台发送处理数据  
        // $.ajax({
        //     type: "POST", //用POST方式传输  
        //     dataType: "text", //数据格式:JSON  
        //     url: '', //目标地址  
        //     data: "phone=" + phone + "&code=" + code,
        //     error: function (XMLHttpRequest, textStatus, errorThrown) { },
        //     success: function (msg) { }
        // });
    });







    // 密码 小眼睛
    // 显示

    var onOff = true;
    $('#password').on('input propertychange', function () {
        if ($('#password').val() == '') {
            $('.pass_eye span').css('display', 'none');
        } else {
            $('.pass_eye span').css('display', 'block');
           
        }
    }); 
    $('.pass_eye span').click(function () {
                if (onOff) {
                    $('#password').showPassword();
                    onOff = false;
                } else {
                    $('#password').hidePassword();
                    onOff = true;
                }
            });
    // 确认密码 小眼睛
    $('#qr_password').on('input propertychange', function () {
        if ($('#qr_password').val() == '') {
            $('.pass_eye2 span').css('display', 'none');
        } else {
            $('.pass_eye2 span').css('display', 'block');
           
        }
    });
    $('.pass_eye2 span').click(function () {
                if (onOff) {
                    $('#qr_password').showPassword();
                    onOff = false;
                } else {
                    $('#qr_password').hidePassword();
                    onOff = true;
                }
            });
    //   判断input输入框全部是否为空以及格式错误
    $('#pubForm').validate({
        rules: {
            namer: {
                required: true,
                minlength: 3
            },
            phoneNumber: {
                required: true,
                minlength: 11,
                maxlength: 11,
                isMobile: true
            },
            mail: 'required',
            pass: {
                required: true,
                minlength: 6,
                maxlength: 15
            },
            qr_pass: {
                required: true,
                minlength: 6,
                maxlength: 15,
                equalTo: "#password"
            },
            check: 'required',
            shouji_yanzheng: 'required'
        },

        messages: {
            namer: {
                required: '请输入姓名'
            },
            mail: '请输入有效邮箱地址',
            phoneNumber: {
                required: '请输入手机号',
                minlength: '请输入至少11位字符',
                maxlength: '请至少输入11位字符',
                isMobile: '请输入正确格式'
            },
            pass: {
                required: '请输入密码',
                minlength: '请输入6-15字符',
                maxlength: '请输入6-15字符'
            },
            qr_pass: {
                required: '请输入密码',
                minlength: '请输入6-15字符',
                maxlength: '请输入6-15字符',
                equalTo: "两次密码不一致"
            },
            check: '请勾选服务'
        },
        submitHandler: function () {
            // ajax请求
            $.ajax({
                url: registerURL + ':9999/oaSystem/register',
                type: 'post',
                data: {
                    empName: $('#name').val(),
                    telphone: $('#number').val(),
                    email: $('#mail').val(),
                    password: $('#password').val()
                },
                success: function (data) {
                    console.log(data);
                    window.location.href = 'login.html';
                },
                error: function (xhr, ero) {
                    console.log(ero);
                }
            });
        }
    });
    // 手机号格式
    jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写手机号码");
</script>


<script>

    // 获取动态验证码
    $(function () {
        var show_num = [];
        draw(show_num);
        $('.under_line').on('click', function () {
            draw(show_num);
        })
        $("#canvas").on('click', function () {
            draw(show_num);
        })
        $(".btn").on('click', function () {
            var val = $(".input_val").val().toLowerCase();
            var num = show_num.join("");
            if (val == '') {
                alert('请输入验证码！');
            } else if (val == num) {
                $(".input_val").val('');
                draw(show_num);
            } else {
                alert('验证码错误！请重新输入！');
                $(".input_val").val('');
                draw(show_num);
            }
        })
    })

    function draw(show_num) {
        var canvas_width = $('#canvas').width();
        var canvas_height = $('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>